<template>
  <div class="p-3">
    <a-divider>产品详情</a-divider>
    <BasicForm @register="registerForm" name="WmItemForm" >
      <template #fileSlot="{model,field}">
        <div class="wm-download-file-d" >
          <JEllipsis class="wm-download-file-span block" v-for="(item,index) in getFileUrlList(model[field],true)" :key="index" :length="30" :value="item.name" @click="handlePreview(item.url)" />
        </div>
      </template>
    </BasicForm>
    <FilePreview @register="regPreViewModal"></FilePreview>
  </div>
</template>

<script setup lang="ts">
import {onMounted, unref,ref} from 'vue'
import {BasicForm, JEllipsis, useForm} from "@/components/Form";
import {detailFormSchema} from "@/views/wmhb/item/WmItem.data";
import { useRouter } from 'vue-router';
import {isEmpty} from "@/utils/is";
import {detail} from '/@/views/wmhb/item/WmItem.api'
import {useMessage} from "@/hooks/web/useMessage";
import {downloadFile} from "@/utils/common/renderUtils";
import {getFileUrlList} from "@/utils";
import {useModal} from "@/components/Modal";
import FilePreview from "@/views/wmhb/item/components/FilePreview.vue";

const [regPreViewModal,{openModal:openPreViewModal}]= useModal()
const router = useRouter();
const {createMessage} = useMessage()
const { currentRoute } = router;
const title = ref('产品详情')

const [registerForm, { setProps, setFieldsValue }] = useForm({
  schemas: detailFormSchema,
  showActionButtonGroup: false,
  baseColProps: {span: 24}
});

onMounted(async ()=>{
  const route = unref(currentRoute);
  const query = route.query;
  title.value = '产品详情'
  if (!isEmpty(query)&&query.id){
    const result = await detail({id:query.id})
    if (!result){
      title.value = '发生错误了'
      createMessage.error("没有该产品信息!")
      return
    }
    await setFieldsValue({
      ...result
    })
  }
})

function handlePreview(text){
  openPreViewModal(true,{
    fileUrl:text
  })
 }
</script>


<style lang="less">
.wm-download-file-d{
  width:100%;
  white-space: normal;
  overflow-wrap: break-word
}
.wm-download-file-span,.wm-link-span{
  color: #0077ff;
  text-decoration: underline;
  cursor: pointer;
}

</style>
